import React, { useState} from "react";
import Modal from "antd/lib/modal";
import Checkbox from "antd/lib/checkbox";
import Select from "antd/lib/select";
import Input from "antd/lib/input";
import InputNumber from "antd/lib/input-number";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import notification from "@/services/notification";
import HtmlContent from "@redash/viz/lib/components/HtmlContent";

const { Option } = Select;

function FunctionsDialog({ dialog }) {
  const [fun, setFun] = useState({query:1});
  const functionMemo = "<p><b>1、取数函数取结果集参数说明：</b>" + 
  "<ul>" + 
  "<li>query或querys  查询id，数字，属于必填参数。当用querys时会立即加载，适用于非界面显示元素。</li>" + 
  "<li>parameters  查询参数，json，可选参数；参数值若为多选可以是数组;若为日期范围可以是json;若要取url参数，则parameter::url参数名的形式;另外currentUser::参数名，可以取当前用户信息。</li>" + 
  "<li>countRow  显示统计行数模式，布尔，可选参数，默认false；为true时后续参数皆不需要。</li>" + 
  "<li>colName  取数列名或列顺序号，字符串支持逗号多列，多列时返回数组[]，不填为全部列。</li>" + 
  "<li>rowNumber  取数行号，可选参数。" +
  "<ul><li>该参数为数字时：取指定行的值(从0开始)；</li>" + 
  "<li>该参数不存在时：返回指定列全部行值数组[]；后续参数皆不需要。</li>" +
  "<li>该参数为字符串时：支持如\"0-5\"形式返回指定列从起始至结束行的单元值数组[]；后续参数皆不需要。</li>" +
  "<li>该参数为字符串时：支持如\"0,3,5,7-9\"形式返回指定列表达式特定行的单元值数组[]；后续参数皆不需要。</li>" +
  "</ul></li>" +
  "<li>stringDecimal  小数点后位数，数字；可选参数，默认0不显示小数点和小数位。</li>" + 
  "<li>stringDecChar  小数点符号，字符；可选参数，默认为\".\"。</li>" + 
  "<li>stringThouSep  千分位符号，字符；可选参数，默认为空，不显示千分位。</li>" + 
  "<li>numberArray    数字数组，bool；可选参数，默认为false字符数组，会为数组元素加上‘’。</li>" + 
  "<li>tableData      表格数据类型，bool；可选参数，为true时，会将数组转化为<td>等html元素返回。</li>" + 
  "</ul><b>2、取数函数取url参数说明：</b>" + 
  "<ul><li>parameter  url参数名，字符串，必填参数。</li>" +
  "<li>例如：{{\"parameter\":\"parameter1\"}}，取出url参数p_parameter1或parameter1值。</li>" + 
  "</ul><b>3、取数函数取cookie值说明：</b>" + 
  "<ul><li>cookie  cookie参数名，字符串，必填参数。可选内容包括：" +
  "<ul><li>colorstyle_bg：报表背景样式；</li>" +
  "<li>colorstyle_back：部件背景样式；</li>" +
  "<li>colorstyle_color：部件前景样式；</li>" + 
  "<li>colorstyle_titleback：部件标题背景样式；</li>" +
  "<li>colorstyle_titlecolor：部件标题前景样式；</li>" + 
  "<li>colorstyle_dialogback：部件弹窗背景样式；</li>" + 
  "</ul></li>" +
  "<li>例如Markdown中table背景：style=\"background-color:{{\"cookie\":\"colorstyle_back\"}}\"</li>" + 
  "</ul><b>4、取数函数取session值说明：</b>" + 
  "<ul><li>session  session参数名，字符串，必填参数。可选内容包括：" +
  "<ul><li>currentUser_参数名(id/name/email/mobile)：可以取当前用户信息；</li>" +
  "<li>scaleX/scaleY/scaleMin/scaleMax：获取当前缩放比例（水平或垂直方向，两者中小者或大者）用于markdown自行控制大小；</li>" +
  "</ul></li>" +
  "</ul><b>5、取数函数取随机数random说明：</b>" + 
  "<ul><li>random '',默认返回一个4位整数的随机数，主要用于a标签链接的报表。" +
  "</ul></li>" +
  "</ul>" +
  "</p>"


  function processType(key, value) {
    let ps = {}
    ps[key] = value
    setFun(ps);
  }

  function processChange(key, value) {
    let ps = {...fun}
    ps[key] = value
    setFun(ps);
  }

  const saveWidget = () => {
      dialog.close(fun).catch(() => {
        notification.error("取数函数未能添加！");
      });
  };

  return (
    <Modal
      {...dialog.props}
      maskClosable = {false}
      title="取数函数"
      onOk={saveWidget}
      okText="确定"
      cancelText="取消"
      width={700}
    >
      <div>
        <label>取数类型：</label>
        <Select style={{ width: 300 }}
          value={Object.keys(fun)[0]}
          onChange={value => processType(value, '')}
        >
          <Option value='query'>取查询结果集</Option>
          <Option value='parameter'>取Url参数</Option>
          <Option value='cookie'>取样式信息</Option>
          <Option value='session'>取登录信息</Option>
          <Option value='random'>取随机数</Option>
        </Select>
      </div>  

      {Object.keys(fun)[0] === 'query' && (
      <div>
        <br/>
        <label>取值查询：</label>
        <Input type="text" style={{width:300}}
          value={fun.query}
          onChange={e => processChange("query", e.target.value)}
        />请输入查询id。
        <br/><br/>
        <Checkbox
          name="no_refresh"
          checked={fun.countRow || false}
          onChange={e => processChange("countRow", e.target.checked)}>
          获取查询结果记录总行数
        </Checkbox>
        <br/><br/>
        <label>取值字段：</label>
        <Input type="text" style={{width:300}}
          value={fun.colName}
          disabled={(fun.countRow || false)}
          onChange={e => processChange("colName", e.target.value)}
        />
        <br/><br/>
        <label>取值行号：</label>
        <InputNumber
          min="0"
          value={fun.rowNumber}
          disabled={(fun.countRow || false)}
          onChange={value => processChange("rowNumber", value)}
        />从0开始。
      </div>
      )}

      {Object.keys(fun)[0] === 'parameter' && (
      <div>
        <br/>
        <label>参数名称：</label>
        <Input type="text" style={{width:300}}
          value={fun.parameter}
          onChange={e => processChange("parameter", e.target.value)}
        />
        <br/>
        <label>例如：parameter1，取出url参数p_parameter1或parameter1值。</label>
      </div>
      )}

      {Object.keys(fun)[0] === 'cookie' && (
      <div>
        <br/>
        <label>样式信息：</label>
        <Select style={{ width: 300 }}
        value={fun.cookie}
        onChange={value => processChange("cookie", value)}
      >
          <Option value='colorstyle_bg'>colorstyle_bg 报表背景样式</Option>
          <Option value='colorstyle_back'>colorstyle_back：部件背景样式</Option>
          <Option value='colorstyle_color'>colorstyle_color：部件前景样式</Option>
          <Option value='colorstyle_titleback'>colorstyle_titleback：部件标题背景样式</Option>
          <Option value='colorstyle_titlecolor'>colorstyle_titlecolor：部件标题前景样式</Option>
          <Option value='colorstyle_dialogback'>colorstyle_dialogback：部件弹窗背景样式</Option>
        </Select>
      </div>
      )}

      {Object.keys(fun)[0] === 'session' && (
      <div>
        <br/>
        <label>登录信息：</label>
        <Select style={{ width: 300 }}
        value={fun.session}
        onChange={value => processChange("session", value)}
      >
          <Option value='currentUser_id'>id 用户ID</Option>
          <Option value='currentUser_name'>name 用户名称</Option>
          <Option value='currentUser_email'>email 电子邮箱</Option>
          <Option value='currentUser_mobile'>mobile 手机号</Option>
          <Option value='scaleX'>scaleX 当前水平方向缩放比例</Option>
          <Option value='scaleY'>scaleY 当前垂直方向缩放比例</Option>
          <Option value='scaleMin'>scaleMin 当前两方向上最小缩放比例</Option>
          <Option value='scaleMax'>scaleMax 当前两方向上最大缩放比例</Option>
        </Select>
      </div>
      )}

      <br/>
      <div style={{height: '200px', overflowY: 'scroll'}}>
        <br/><HtmlContent>{functionMemo}</HtmlContent>
      </div>  
    </Modal>
  );
}

FunctionsDialog.propTypes = {
  dialog: DialogPropType.isRequired,
};

FunctionsDialog.defaultProps = {
};

export default wrapDialog(FunctionsDialog);
